<template>
  <div ref="container" style="width: 100%; height: 400px"> </div>
</template>

<script>
  import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
  import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
  import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
  import '@univerjs/presets/lib/styles/preset-sheets-core.css';

  console.log('MIN: https://docs.univer.ai/zh-CN/guides/sheets/integrations/vue');
  export default {
    data() {
      return {
        univerAPI: null,
      };
    },
    mounted() {
      console.log('mounted min');

      const { univerAPI } = createUniver({
        locale: LocaleType.ZH_CN,
        locales: {
          [LocaleType.ZH_CN]: merge({}, UniverPresetSheetsCoreZhCN),
        },
        theme: defaultTheme,
        presets: [
          UniverSheetsCorePreset({
            container: this.$refs.container,
          }),
        ],
      });

      univerAPI.createWorkbook({ name: 'Test Sheet' });
      this.univerAPI = univerAPI;
    },
    beforeDestroy() {
      this.univerAPI.dispose();
      this.univerAPI = null;
    },
  };
</script>
